<script setup>
  import { getAnalysisApi, getCityOfInterestApi, getGenderRatioApi, getHotCityApi, getWordCloudApi } from '@/api/data'
  import { onMounted, reactive, ref } from 'vue'
  // 1. 导入echarts
  import * as echarts from 'echarts'
  import 'echarts-wordcloud'

  const data = reactive({
    analysisData: {},
    genderRatio: [],
    interestCity: [],
    wordCloud: [],
    hotCity: []
  })

  // 2. 准备显示的容器
  const hotCityRef = ref(null)
  const genderRatioRef = ref(null)
  const wordCloudRef = ref(null)
  let hotCityChart = null
  let genderRatioChart = null
  let wordCloudChart = null

  const initData = async () => {
    // 通过Promise.all方法并发请求
    const [res, res2, res3, res4, res5] = await Promise.all([getAnalysisApi(), getGenderRatioApi(), getCityOfInterestApi(), getWordCloudApi(), getHotCityApi()])
    data.analysisData = res.data
    data.genderRatio = res2.data
    data.interestCity = res3.data
    data.wordCloud = res4.data
    data.hotCity = res5.data
    // 根据数据生成图表
    loadHotCityCharts()
    loadGenderRatioCharts()
    loadWordCloudCharts()
  }

  // * 加载热门旅游城市
  const loadHotCityCharts = () => {
    // 初始化echarts对象
    hotCityChart = echarts.init(hotCityRef.value)
    // 处理数据
    const xData = []
    const yData = []
    data.hotCity.forEach((item) => {
      xData.push(item._id)
      yData.push(item.count)
    })
    // 准备配置项
    const options = {
      grid: { left: 10, bottom: 0, top: 20, right: 10, containLabel: true },
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      xAxis: {
        type: 'category',
        data: xData,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: { type: 'value' },
      series: [{ name: '人气', type: 'bar', data: yData, barWidth: '45%', itemStyle: { color: '#6395fa' } }]
    }
    // 加载配置
    hotCityChart.setOption(options)
  }
  // * 加载用户性别占比
  const loadGenderRatioCharts = () => {
    // 初始化echarts对象
    genderRatioChart = echarts.init(genderRatioRef.value)
    // 处理数据
    const xData = data.genderRatio.map((item) => ({ name: item._id, value: item.count }))
    // 准备配置项
    const options = {
      color: ['#b3a0ff', '#ffcd17'],
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', right: '0', top: 'center', icon: 'circle', textStyle: { fontSize: 10 } },
      series: [
        {
          left: -50,
          name: '用户性别占比',
          type: 'pie',
          radius: '65%',
          data: xData,
          label: { show: true, formatter: ({ percent }) => Math.round(percent) + '%', position: 'inside', color: '#fff' },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    // 加载配置
    genderRatioChart.setOption(options)
  }
  // * 加载词云图
  const loadWordCloudCharts = () => {
    // 初始化echarts对象
    wordCloudChart = echarts.init(wordCloudRef.value)
    // 处理数据
    const xData = data.wordCloud.map((item) => ({ name: item.city, value: item.count }))
    // 准备配置项
    const options = {
      series: [
        {
          type: 'wordCloud',
          shape: 'circle',
          keepAspect: false,
          left: 'center',
          top: 'center',
          width: '100%',
          height: '90%',
          right: null,
          bottom: null,
          sizeRange: [12, 60],
          rotationRange: [-90, 90],
          rotationStep: 45,
          // 词于词的间隔
          gridSize: 8,
          drawOutOfBound: false,
          layoutAnimation: true,
          textStyle: {
            fontFamily: 'sans-serif',
            color: function () {
              return 'rgba(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.random()].join(',') + ')'
            }
          },
          emphasis: {
            // focus: 'self',
            textStyle: {
              textShadowBlur: 3,
              textShadowColor: '#333'
            }
          },
          data: xData
        }
      ]
    }
    // 加载配置
    wordCloudChart.setOption(options)
  }

  onMounted(() => {
    initData()
    //随着屏幕大小调节图表
    window.addEventListener('resize', () => {
      hotCityChart.resize()
      genderRatioChart.resize()
      wordCloudChart.resize()
    })
  })
</script>

<template>
  <div class="dashboard-view">
    <!-- 数据卡片1 -->
    <div class="card-view view1">
      <div class="card">
        <div class="number">{{ data.analysisData.userCount }}</div>
        <div class="tip">累计注册用户</div>
      </div>
      <div class="card">
        <div class="number">{{ data.analysisData.newUserCount }}</div>
        <div class="tip">昨日新增用户</div>
      </div>
      <div class="card">
        <div class="number">{{ data.analysisData.travelsCount }}</div>
        <div class="tip">发布游记数量</div>
      </div>
      <div class="card">
        <div class="number">{{ data.analysisData.theSameDayTCount }}</div>
        <div class="tip">今日发布游记</div>
      </div>
    </div>
    <!-- 数据卡片2 -->
    <div class="card-view view2">
      <div class="card">
        <div class="title">十大旅游目的地</div>
        <div ref="hotCityRef" class="charts-content"></div>
      </div>
      <div class="card">
        <div class="title">用户性别占比</div>
        <div ref="genderRatioRef" class="charts-content"></div>
      </div>
    </div>
    <!-- 数据卡片3 -->
    <div class="card-view view3">
      <div class="card">
        <div class="title">八大最感兴趣城市排名</div>
        <div class="list">
          <div class="header">
            <span>城市</span>
            <span>人气</span>
          </div>
          <div class="item" v-for="item in data.interestCity" :key="item._id">
            <div class="left">
              <img :src="item.cover_image.url" alt="" />
              <span>{{ item.city }}</span>
            </div>
            <div class="right">{{ item.count }}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="title">词云图(用户兴趣标签)</div>
        <div ref="wordCloudRef" class="charts-content"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .dashboard-view {
    padding-bottom: 20px;
  }
  .card-view {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    justify-content: space-between;
    .card {
      background-color: #fff;
      box-sizing: border-box;
      border-radius: 6px;
      padding: 10px;
      &:hover {
        box-shadow: 0 0 3px rgba(122, 122, 122, 0.1);
      }
      .title {
        padding: 10px;
        padding-top: 0;
        font-size: 18px;
        font-weight: bold;
      }
      .number {
        font-size: 22px;
        font-weight: bold;
      }
      .tip {
        font-size: 16px;
        color: #999;
      }
    }
  }
  .view1 {
    height: 110px;
    .card {
      width: 21%;
      padding: 26px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
  .view2 {
    .card:nth-child(1) {
      width: 59%;
    }
    .card:nth-child(2) {
      width: 40%;
    }
    .charts-content {
      width: 100%;
      height: 400px;
      /* background-color: red; */
    }
  }
  .view3 {
    .card:nth-child(1) {
      width: 49.5%;
    }
    .card:nth-child(2) {
      width: 49.5%;
    }
    .list {
      .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        color: #999;
      }
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
        .left {
          display: flex;
          align-items: center;
        }
        img {
          width: 35px;
          height: 35px;
          margin-right: 10px;
          border-radius: 10px;
          object-fit: cover;
        }
        span {
        }
        .right {
        }
      }
    }
    .charts-content {
      margin-top: 30px;
      /* height: calc(100% - 40px); */
      width: 100%;
      height: 400px;
    }
  }
</style>
